<!-- subpkg_archive/form/index.vue -->

<template>
	<scroll-page>
		<view class="archive-page">
			<uni-forms border label-width="220rpx" ref="formRef" :model="formData" :rules="fromRules">
				<uni-forms-item label="患者姓名" name="name">
					<uni-easyinput
						v-model="formData.name"
						placeholder-style="color: #C3C3C5; font-size: 32rpx"
						:styles="{ color: '#121826' }"
						:input-border="false"
						:clearable="false"
						placeholder="请填写真实姓名"
					/>
				</uni-forms-item>
				<uni-forms-item label="患者身份证号" name="idCard">
					<uni-easyinput
						placeholder-style="color: #C3C3C5; font-size: 32rpx"
						v-model="formData.idCard"
						:styles="{ color: '#121826' }"
						:input-border="false"
						:clearable="false"
						placeholder="请填写身份证号"
					/>
				</uni-forms-item>
				<uni-forms-item label="患者性别" name="gender">
					<uni-data-checkbox
						selectedColor="#16C2A3"
						v-model="formData.gender"
						:localdata="[
							{ text: '男', value: 1 },
							{ text: '女', value: 0 }
						]"
					/>
				</uni-forms-item>
				<uni-forms-item label="默认就诊人" name="defaultFlag">
					<view class="uni-switch">
						<switch @change="onSwitchChange" :checked="formData.defaultFlag === 1" color="#20c6b2" style="transform: scale(0.7)" />
					</view>
				</uni-forms-item>
				<button class="uni-button" @click="onFormSubmit">保存</button>
			</uni-forms>
		</view>
	</scroll-page>
</template>

<script setup>
import { ref } from 'vue';
import usePatientStore from '@/store/patient.js';

const patientStore = usePatientStore();

const props = defineProps({
	id: String
});

const formRef = ref();

// 110101196107145504
// 110101198307212600
const formData = ref({
	name: '',
	idCard: '',
	gender: 1,
	defaultFlag: 1
});

const onSwitchChange = (e) => {
	formData.value.defaultFlag = e.detail.value ? 1 : 0;
};

const fromRules = {
	// 对name字段进行必填验证
	name: {
		rules: [
			{
				required: true,
				errorMessage: '请输入姓名'
			},
			{
				pattern: '^[\\u4e00-\\u9fa5]{2,5}$',
				errorMessage: '姓名长度在2到5个字符!'
			}
		]
	},
	idCard: {
		rules: [
			{
				required: true,
				errorMessage: '请输入身份证'
			},
			{
				pattern: '^[1-9]\\d{5}(18|19|20)\\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\\d{3}[0-9Xx]$',
				errorMessage: '身份证输入有误!'
			}
		]
	},
	gender: {
		rules: [
			{
				required: true,
				errorMessage: '请勾选患者姓名！'
			},
			{
				validateFunction: (rule, value, data, callback) => {
					if (data.idCard.slice(16, 17) % 2 !== value) {
						callback('性别与身份证不符合!');
					}
					return true;
				}
			}
		]
	}
};

// 登录
const onFormSubmit = async () => {
	try {
		const result = await formRef.value.validate();

		//判断当前是保存还是更新
		if (!props.id) {
			patientStore.addPatientApiAction(result);
		} else {
			console.log('修改');
			patientStore.updatePatientApiAction(formData.value);
		}
	} catch (e) {
		//TODO handle the exception
		console.log(e);
	}
};

const getPatientDetail = async () => {
	if (!props.id) return;
	uni.setNavigationBarTitle({
		title: '编辑患者'
	});
	const res = await patientStore.patientDetailApiAction(props.id);
	formData.value = res;
};
getPatientDetail();
</script>

<style lang="scss">
// subpkg_archive/form/index.scss
.archive-page {
	padding: 30rpx;

	:deep(.uni-forms-item) {
		padding-top: 30rpx !important;
		padding-bottom: 20rpx !important;
	}

	:deep(.uni-forms-item__label) {
		font-size: 32rpx;
		color: #3c3e42;
	}

	:deep(.uni-forms-item--border) {
		border-top: none;
		border-bottom: 1rpx solid #ededed;
	}

	:deep(.uni-easyinput__content-input) {
		height: 36px;
	}

	:deep(.checklist-text) {
		font-size: 32rpx !important;
		margin-left: 20rpx !important;
	}

	:deep(.uni-forms-item__error) {
		position: absolute !important;
		left: -220rpx !important;
		right: 0 !important;
		top: auto !important;
		padding-top: 10rpx !important;
		margin-top: 20rpx;
		border-top: 2rpx solid #eb5757;
		color: #eb5757;
		font-size: 24rpx;
		transition: none;
	}

	:deep(.uni-data-checklist) {
		display: flex;
		height: 100%;
		padding-left: 10px;
	}

	:deep(.radio__inner) {
		transform: scale(1.25);
	}

	:deep(.checkbox__inner) {
		transform: scale(1.25);
	}
}

.uni-switch {
	display: flex;
	align-items: center;
	height: 100%;
}

.uni-button {
	margin-top: 60rpx;
}
</style>
